<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/global.css" rel="stylesheet" type="text/css" />
		
		
		  
	</head>
	<body>
		<div id="app">
		  
		<div id="header">
		    <div class="login_header_mid"></div>
		    <div class="login_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a>  | <a href="shopping.html" class="blue">购物车</a> | <a href="register.html" class="blue">注册</a></div>
		</div>
		
		<div id="main">
		    <div class="login_main_left">
		        <div>
		            <img src="img/login_main_01.jpg" alt="中间图片"/>
		            <img src="img/login_main_02.jpg" alt="中间图片"/>
		            <img src="img/login_main_03.jpg" alt="中间图片"/>
		        </div>
		        <div class="login_main_end">
		            <dl class="login_green">
		                <dt>更多选择、更低价格</dt>
		                <dd>100万种商品包含图书、数码、美妆、运动健康等，价格低于地面店20%以上</dd>
		            </dl>
		            <div class="login_main_dotted"></div>
		            <dl class="login_green">
		                <dt>全场免运费、货到付款</dt>
		                <dd>免费送货上门、360个城市货到付款。另有网上支付、邮局汇款等多种支付方式</dd>
		            </dl>
		            <div class="login_main_dotted"></div>
		            <dl class="login_green">
		                <dt>真实、优质的商品评论</dt>
		                <dd>千万用户真实、优质的商品评论，给您多角度、全方位的购物参考</dd>
		            </dl>
		        </div>
		    </div>
		    <div class="login_main_mid">
		        <div class="login_content_top">请登录云淘网</div>
		        <div class="login_content_line"></div>
				<div style="clear:both;margin-left:80px;color: red;">{{errMsg}}</div>
		        
		            <dl class="login_content">
		                <dt>用户名：</dt>
		                <dd>
							
						<input 
		                  type="text"
		                  v-model="userLogin.username"
		                  autoComplete="on"
		                  placeholder="请输入用户名" 
						  class="login_content_input">
						</dd>
		            </dl>
		            <dl class="login_content">
		                <dt>密码：</dt>
		                <dd>
							<input 
							          type="password"
							          v-model="userLogin.password"
							          autoComplete="on"
							          placeholder="请输入密码"
									  class="login_content_input">
							
						</dd>
		            </dl>
		            <dl class="login_content">
		                <dt> &nbsp;</dt>
		                <dd>
							<button @click.native.prevent="login">
							  登录
							</el-button>
						</dd>
		            </dl>
		       
				
		        <div class="login_content_dotted"></div>
		        <div class="login_content_end_bg">
		            <div class="login_content_end_bg_top">
		                <label class="login_content_bold">还不是云淘网用户？</label>快捷方便的免费注册
		            </div>
		            <div class="login_content_end_bg_end">
		                <input @click="register()" class="login_register_out" value=" " type="button"/>
		            </div>
		        </div>
		    </div>
		    <div class="login_main_right"><img src="img/login_main_04.jpg" alt="右侧图片"/></div>
		</div>
		</div>
		
	</body>
</html>
<script src="js/vue3.js"></script>
<script src="js/axios.js"></script>
<script src="js/request.js"></script>
<script src="js/common.js"></script>
<script>
	
	const {createApp} = Vue.createApp({
	
	      data(){
	        return {
				userLogin:{
					username:'',
					password:''
				},
				errMsg:''
	        }
	      },
		  methods:{
			  login(){
				  
				  request.post(MALL_USER_BASEURL + '/login',this.userLogin)
				  .then(resp => {
				  	if(resp.code===2000){
						location.href = 'search.html'
					}else{	
						this.errMsg= resp.message;
					}
				  })
			  },
			  register(){
				  window.location = "register.html"
			  }
		  },
		 
	
	    }).mount('#app')
</script>
